<template>
  <CommBG>
    <div class="user_order_wrapper pos_absolute flex_header_main">
      <div class="user_order_title flex_header">
        <div class="user_order_header">Welcome</div>
        <div class="user_order_dis">迪丽热巴</div>
      </div>
      <div class="user_order_main flex_main">
        <div class="user_info_row">
          <div class="user_info_title">请先提交个人基础信息</div>
          <div class="flex_left_right user_info_name" style="margin-bottom: 0">
            <div class="flex_right user_info_label">个人基础信息</div>
            <div class="flex_left user_info_btn">
              <div class="btn">信息未提交</div>
            </div>
          </div>
        </div>
        <div class="user_info_row" v-for="(item, index) in dataList" :key="index">
          <div class="user_info_title">{{ item.title }}</div>
          <div class="flex_left_right user_info_name">
            <div class="flex_right user_info_label">{{ item.label }}</div>
            <div class="flex_left user_info_btn">
              <div class="btn btn_status">已报考</div>
            </div>
          </div>
          <div class="org_name">{{ item.orgName }}</div>
          <div class="submit_btn">提交信息 ></div>
        </div>
      </div>
    </div>
  </CommBG>
</template>

<script lang="ts" setup name="user_orderPage">
  import CommBG from '@/components/bg/CommBG.vue'
  import { reactive, ref } from 'vue'
  import useUserStore from '@/store/modules/user'
  import { useRouter } from 'vue-router'
  import sysMsg from '@/utils/sysMsg'

  const router = useRouter()
  const userStore = useUserStore()
  const ruleForm = ref<any>(null)
  const dataList = ref([
    {
      title: '请选择您需要提交材料的证书',
      label: 'AIGC艺术设计师（高级）',
      btn: '已报考',
      orgName: '发证机构：工信部/教育与考试中心',
    },
    {
      title: '请选择您需要提交材料的证书',
      label: 'AIGC艺术设计师（高级）',
      btn: '已报考',
      orgName: '发证机构：工信部/教育与考试中心',
    },
    {
      title: '请选择您需要提交材料的证书',
      label: 'AIGC艺术设计师（高级）',
      btn: '已报考',
      orgName: '发证机构：工信部/教育与考试中心',
    },
    {
      title: '请选择您需要提交材料的证书',
      label: 'AIGC艺术设计师（高级）',
      btn: '已报考',
      orgName: '发证机构：工信部/教育与考试中心',
    },
    {
      title: '请选择您需要提交材料的证书',
      label: 'AIGC艺术设计师（高级）',
      btn: '已报考',
      orgName: '发证机构：工信部/教育与考试中心',
    },
  ])
  const onSubmit = () => {
    console.log(router)
    sysMsg.successMsg('点击登录')
    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
      if (valid) {
        await userStore.user_orderCloud({ userName: '', passWord: '' })
      } else {
        console.log('error submit!!', errors)
      }
    })
  }
</script>

<style scoped lang="less">
  .user_order_wrapper {
    .user_order_title {
      font-weight: 500;
      margin: 120px 108px 44px 108px;
      .user_order_header {
        font-size: 32px;
        color: #ffffff;
        margin-bottom: 22px;
      }
      .user_order_dis {
        font-size: 62px;
        color: #ffffff;
      }
    }
    .user_order_main {
      background: #ffffff;
      border-radius: 40px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin: 0 30px;
      .user_info_row {
        padding: 48px 70px;
        border-bottom: 4px solid rgba(0, 0, 0, 0.2);
        .user_info_title {
          font-size: 36px;
          color: #4548f4;
          font-weight: bold;
          margin-bottom: 42px;
        }
        .user_info_name {
          margin-bottom: 42px;
          .user_info_label {
            font-weight: 600;
            font-size: 32px;
            color: #000000;
          }
          .user_info_btn {
            display: inline-block;
            width: auto;
            .btn {
              color: #ffffff;
              background: #f66633;
              border-radius: 36px;
              padding: 12px 22px;
              font-size: 28px;
            }
            .btn_status {
              color: #f66633;
              background: #ffffff;
              border: 4px solid #f66633;
            }
            .btn_status_active {
              color: #51c59a;
              background: #ffffff;
              border: 4px solid #51c59a;
            }
          }
        }

        .org_name {
          font-size: 32px;
          color: rgba(0, 0, 0, 0.9);
          margin-bottom: 42px;
        }
        .submit_btn {
          font-size: 32px;
          color: #4548f4;
        }
      }
    }
  }
</style>
